import React from 'react';
import { Row, Col, Button } from 'antd';
import { observer, inject } from 'mobx-react';
import {WeaDialog, WeaSelect, WeaBrowser, WeaLocaleProvider} from 'ecCom';
import { userType } from './constants';
const getLabel = WeaLocaleProvider.getLabel;
import './index.less';

const options = () => {
  return [{
    key: "person",
    showname: getLabel('509237', '人员')
  },
    {
      key: "department",
      showname: getLabel('505977', '部门')
    },
    {
      key: "subcompany",
      showname: getLabel('505976', '分部')
    },
    {
      key: "group",
      showname: getLabel('24002','群组')
    }
  ]
};

@inject('edcAddShareStore')
@observer
export default class AddSharePerson extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectKey: 'person'
    }
    this.store = props.edcAddShareStore;
  }

  onSelectKeyChange = selectKey => {
    this.setState({ selectKey });
  }

  render() {
    const { visible,  onCancel } = this.props;
    const { selectKey } = this.state;
    const { 
      addShareMembers, 
      onAddShareSure, 
      userData,
      selectGroupItems,
      departmentItems,
      subcompanyItems
    } = this.store;
    const buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@k3t3b5@$onOk`} type="primary" onClick={() => onAddShareSure(selectKey)}>
        {getLabel('826','确定')}
      </Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mc155n@cancel`} type="ghost" onClick={onCancel}>
        {getLabel('31129','取消') }
      </Button>
    ];

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@lvygo4`}
        title={getLabel('527627','新增可填写用户')}
        className='wea-edc-add-share-people'
        icon={"icon-coms02-Data-center"}
        iconBgcolor = "#1a57a0"
        hasScroll
        confirmLoading={true}
        visible={visible}
        buttons={buttons}
        onCancel={onCancel}
        style={{ width: 500, height: 150 }}
        destroyBodyOnClose={true}
      >
        <div className='content'>
         <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@k5i7yn`}>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2as7m6`} span={6}>
            {getLabel('527630','类    型')}：
          </Col>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3l9zh2`} span={18}>
            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@5n2yme`} 
              style={{ width: '325px' }}
              options={options()}
              onChange={this.onSelectKeyChange}
              value={selectKey}
            />
          </Col>
         </Row>
           {
            selectKey === 'person' ?
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@sx3lgc`}>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ymskjd`} span={6}>
                {getLabel('33210','选择人员')}：
              </Col>
              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@u76y8s`} span={18}>
                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@ito687`}
                  type={17}
                  title={getLabel('33210','选择人员')}
                  icon={"icon-coms02-Data-center"}
                  iconBgcolor = "#1a57a0"
                  textDecoration={true}
                  inputStyle={{ width: 325 }}
                  replaceDatas={userData}
                  onChange={(ids, names, datas) => addShareMembers(userType.USER, ids, datas)}
                  isSingle={false}
                />
              </Col>
            </Row> : null
            }
            { 
              selectKey === 'group' ?
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@thh9tm`}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ks7eqt`} span={6}>
                  {getLabel('527628','选择群组')}：
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@abzs2l`} span={18}>
                  <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@h5syb4`}
                    type={'EMChatGroup'}
                    title={getLabel('527628','选择群组')}
                    icon={"icon-coms02-Data-center"}
                    iconBgcolor = "#1a57a0"
                    textDecoration={true}
                    inputStyle={{ width: 325 }}
                    replaceDatas={selectGroupItems}
                    onChange={(ids, names, datas) => addShareMembers(userType.CHATGROUP, ids, datas)}
                    isSingle={false}
                  />
                </Col>
            </Row> : null
            }
            {
              selectKey === 'department' ?
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@pvf7kf`}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6kaeel`} span={6}>
                  {getLabel('33255','选择部门') }：
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8c01gz`} span={18}>
                  <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@rpmgsq`}
                    type={57}
                    title={getLabel('33255','选择部门') }
                    icon={"icon-coms02-Data-center"}
                    iconBgcolor = "#1a57a0"
                    textDecoration={true}
                    tabs= {[
                      {
                        "key": "2",
                        "name": getLabel('25332','组织结构') ,
                        "dataURL": null,
                        "dataParams": null,
                        "isSearch": false,
                        "showOrder": 0,
                        "selected": false
                      }, {
                        "key": "1",
                        "name": getLabel('130619','按列表') ,
                        "dataURL": null,
                        "dataParams": {
                          "list": "1"
                        },
                        "isSearch": true,
                        "showOrder": 0,
                        "selected": false
                    }]}
                    inputStyle={{ width: 325 }}
                    replaceDatas={departmentItems}
                    onChange={(ids, names, datas) => addShareMembers(userType.DEPARTMENT, ids, datas)}
                    isSingle={false}
                  />
                </Col>
              </Row> : null
            }
            {
              selectKey === 'subcompany' ?
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@nsae8g`}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zfb12g`} span={6}>
                  {getLabel('33256','选择分部') }：
                </Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2ptc12`} span={18}>
                  <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@onda0l`}
                    type={194}
                    title={getLabel('33256','选择分部') }
                    icon={"icon-coms02-Data-center"}
                    iconBgcolor = "#1a57a0"
                    textDecoration={true}
                    tabs = {[
                      {
                        "key": "2",
                        "name": getLabel('25332','组织结构') ,
                        "dataURL": null,
                        "dataParams": null,
                        "isSearch": false,
                        "showOrder": 0,
                        "selected": false
                      }, {
                        "key": "1",
                        "name": getLabel('130619','按列表') ,
                        "dataURL": null,
                        "dataParams": {
                          "list": "1"
                        },
                        "isSearch": true,
                        "showOrder": 0,
                        "selected": false
                      }]}
                    inputStyle={{ width: 325 }}
                    replaceDatas={subcompanyItems}
                    onChange={(ids, names, datas) => addShareMembers(userType.SUBCOMPANY, ids, datas)}
                    isSingle={false}
                  />
                </Col>
              </Row> : null
            }
        </div>
      </WeaDialog>
    )
  }
}